<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>竞赛列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <link rel="stylesheet" href="../../css/theme5.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-input:focus, .layui-textarea:focus{border-color:#1E9FFF!important}
        .layui-body{overflow-y: scroll;}
        body{overflow-y: scroll;}
        /*.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{*/
        /*    left: 50%;*/
        /*    transform: translateX(-50%);*/
        /*}*/
        /*.layui-table td, .layui-table th {*/
        /*    min-width: 0px;*/
        /*}*/
    </style>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
<!--                    <form class="layui-form layui-col-space5">-->
<!--                        <div class="layui-inline layui-show-xs-block">-->
<!--                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start"></div>-->
<!--                        <div class="layui-inline layui-show-xs-block">-->
<!--                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"></div>-->
                        <div class="layui-inline layui-show-xs-block">
                            <input id='search_name' type="text" name="username" placeholder="用户名" autocomplete="off" class="layui-input" style=""></div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-normal" id='search'>
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
<!--                    </form>-->
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table" id="user_list" lay-filter="user_list">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="delAll"><i class="layui-icon">&#xe640;</i>批量删除</button>
<!--        <button class="layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon"></i>添加</button>-->
        <button class="layui-btn layui-btn-normal" lay-event="refresh"><i class="layui-icon" >&#xe669;</i>刷新</button>
    </div>
</script>
<script type="text/html" id="toolbar1">

<!--    <a title="编辑"  lay-event="edit" >-->
<!--        <i class="layui-icon">&#xe642;</i>-->
<!--    </a>-->
<!--    <a lay-event="modify" title="修改密码" >-->
<!--        <i class="layui-icon">&#xe631;</i>-->
<!--    </a>-->
    <a lay-event="del" title="删除" >
        <i class="layui-icon">&#xe640;</i>
    </a>

</script>
<script src="../../lib/jquery.min.js"></script>
<script src="../../js/const.js"></script>
<script src="../../js/util.js"></script>
<script>
    layui.use('laydate',
    function() {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start', //指定元素
            theme: '#1E9FFF'
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end', //指定元素
            theme: '#1E9FFF'
        });

    });</script>
<script>
    layui.use('table',
    function() {
        var table = layui.table;
        //第一个实例
        tablein = table.render({
            elem: '#user_list'
            // ,height: 312
            ,url: '/user_list' //数据接口
            ,page: {theme:'#1e9fff'} //开启分页
            ,toolbar: '#toolbarDemo'
            ,cellMinWidth:48
            ,cols: [[ //表头

                {checkbox: true, align:'left'}
                // ,{field: 'id', title: 'ID', minWidth:50, align:'center'}
                ,{field: 'userName', title: '用户名', minWidth:50, align:'center'}
                ,{field: 'userEmail', title: '邮箱', minWidth:80, align:'center'}
                ,{field: 'userPhone', title: '手机号', minWidth:80, align:'center'}
                ,{field: 'department', title: '部门', minWidth:80, align:'center'}
                ,{field: 'isAdmin', title: '角色', minWidth: 20, align:'center',templet: function(d){
                    if(d.isAdmin==1){
                        return '管理员';
                    }else{
                        return '普通用户';
                    }
                    }}
                ,{field: 'time', title: '注册时间', minWidth: 60, align:'center',templet: function(d){
                        return d.time.split("T")[0];
                    }}
                ,{ title: '操作', toolbar:'#toolbar1', minWidth: 20, align:'center'}
                // ,{field: 'classify', title: '职业', width: 80}
                // ,{field: 'wealth', title: '财富', width: 135, sort: true}
            ]]
            ,limit: 2
            ,parseData: function(res){ //res 即为原始返回的数据
                // console.log(res.data);
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });
        //头工具栏事件
        table.on('toolbar(user_list)',
            function(obj) {
                // var checkStatus = table.checkStatus(obj.config.id);
                console.log(obj);
                switch (obj.event) {
                    case 'delAll':
                        var checkStatus = table.checkStatus(obj.config.id);
                        var data = checkStatus.data;
                        var ids = [];
                        // 获取选中的id
                        data.forEach(function(el) {
                            ids.push(el.id)
                        });
                        if(ids.length < 1){
                            layer.alert('至少选择1条数据',{icon:5});
                        }else{
                            // console.log(ids)
                            layer.confirm('确认要删除这'+ids.length+'条数据吗？',function(index){
                                //捉到所有被选中的，发异步进行删除
                                var data={};
                                data.ids=ids;
                                util.sendPOST("/user_del", data, function (reponse) {
                                    layer.msg('删除成功', {icon: 1});
                                    tablein.reload();
                                }, function (reponse) {
                                    layer.msg('删除失败', {icon: 2});
                                });

                            });
                        }

                        break;
                    case 'add':
                        xadmin.open('添加用户','./member_add.html',600,400);
                        break;
                    case 'refresh':
                        tablein.reload();
                        break;

                };
            });
        //头工具栏事件
        table.on('tool(user_list)',
            function(obj) {
                // var checkStatus = table.checkStatus(obj.config.id);
                console.log(obj);
                switch (obj.event) {
                    case 'edit':
                        xadmin.open('编辑','member-edit.html',600,400);
                        break;
                    case 'modify':
                        xadmin.open('编辑','member-password.html',600,400);
                        break;
                    case 'del':
                        layer.confirm('确认要删除吗？',function(index){
                            //发异步删除数据
                            ids=[];
                            console.log(obj)
                            ids.push(obj.data.id);
                            var data={};
                            data.ids=ids;
                            util.sendPOST("/user_del", data, function (reponse) {
                                layer.msg('删除成功', {icon: 1});
                                // tablein.reload();
                                obj.del();
                            }, function (reponse) {
                                layer.msg('删除失败', {icon: 2});
                            });
                        });
                        break;
                };
            });
        $("#search").click(function () {
            var user_name = $("#search_name").val();
            var data = {};
            data.user_name = user_name;
            tablein.reload({
                url:'/search_user',
                where:{
                    user_name:user_name
                },
                contenType:'application/json'
            });
        });
    });</script>

</html>